<template>
	<view class="flex-col page">
		<view>
			<view :style="{height:statusBarHeight+'px'}"></view>
			<u-navbar title="扫码支付" bgColor="#F5F5F5" @leftClick="backClick">	
			</u-navbar>
		</view>
		
		<view class="flex-row justify-between items-center" style="padding: 45rpx;">
			<view class="flex-col">
				<text style="font-size: 39rpx;font-weight: bold;">付款给</text>
				<text style="margin-top: 10rpx;">{{merchantInfo.name}}</text>
			</view>
			
			<image :src="merchantInfo.img_url ? merchantInfo.img_url :'/static/merchant_logo.png'" style="width: 80rpx;height: 80rpx;border-radius: 5rpx;"></image>
		</view>
		
		
		<view class="input-bg">
			<view style="margin-left: 10rpx;">金额</view>
			<view style="margin-top: 50rpx;margin-bottom: 50rpx;">
				<u--input
					placeholder="请输入金额"
					prefixIcon="rmb"
					prefixIconStyle="font-size: 30px;color: #000"
					type="digit"
					v-model="value"
					focus="true"
					border="none"
					fontSize="20"
				></u--input>
			</view>
			<u-divider></u-divider>
			<view class="flex-col" style="margin-top: 20rpx;" v-for="(item,index) in payMent" :key="index">
				
				<view class="pay-item" @click="checked_add(index)">
					<view class="flex-row items-center">
						<image :src="item.desc" style="width: 50rpx;height: 50rpx;"></image>
						<text style="margin-left: 20rpx;">{{item.name}}</text>
					</view>
					
					<view>
						<radio color='#5c8edc' :checked='item.checked' />
					</view>
				</view>
				
			</view>
		</view>
		
		
		
		<view class="bottom-lay">
			<u-button type="success" shape="circle" text="付款" @click="handleConfirm"></u-button>
		</view>
		
		<payKeyboard v-if="showKeyBoard"  @success="enterSuccess" @close="close"></payKeyboard>
	</view>
</template>

<script>
	import payKeyboard from '@/components/mi-payKeyboard/mi-payKeyboard.vue'
	export default {
		data() {
			return {
				value:'',
				payMent:[],
				merchantInfo:{},
				payObject:{},
				sid:'',
				type:'',
				showBack:1,
				showKeyBoard: false,
			};
		},
		components: {
			payKeyboard
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight + 44
			}
		},
		onLoad(op) {
			if(op.url){ ///小程序扫码支付
				this.showBack = 1;
				console.log("小程序:"+decodeURIComponent(op.url))
				const scanUrl = decodeURIComponent(op.url);
				const params = this.parseQueryString(scanUrl)
				if('sid' in params && 'type' in params){
					this.sid = params.sid
					this.type = params.type
				}
			}else{
				this.showBack = 2;
				const q = decodeURIComponent(op.q) 
				const params = this.parseQueryString(q)
				if('sid' in params && 'type' in params){
					this.sid = params.sid
					this.type = params.type
				}
			}
			// this.sid = options.sid;
			// this.type = options.type;
		},
		onShow() {
			this.getMerchantInfo();
		},
		methods:{
			parseQueryString(url) {
			  const query = {};
			  const urlParts = url.split('?');
			  
			  if (urlParts.length > 1) {
			    const queryString = urlParts[1];
			    const pairs = queryString.split('&');
			    
			    for (const pair of pairs) {
			      const [key, value] = pair.split('=');
			      query[decodeURIComponent(key)] = decodeURIComponent(value || '');
			    }
			  }
			  
			  return query;
			},
			
			backClick(){
				if(this.showBack == 1){
					uni.navigateBack()
				}else{
					uni.switchTab({
						url:'/pages/index/index'
					})
				}
			},
			
			enterSuccess(password){
				this.$request({
					url:'?c=Pay&a=scanPay',
					type:'post',
					data:{
						sid:this.sid,
						type:this.type,
						payType:this.payObject.value,
						amount:this.value,
						trade_password:password
					}
				}).then(res =>{
					if(this.payObject.value == "wechatPay"){
						this.weixinpay(res.data)
					}else{
						uni.showToast({
							title:'支付成功'
						});
						setTimeout(() => {
						   // uni.navigateBack();
						   let obj = {}
						   obj.showBack = this.showBack
						   obj.type = this.payObject.value
						   obj.number = this.value
						   
						   let success = JSON.stringify(obj)
						   uni.redirectTo({
								url:'/pages/scan/scan_success?obj=' + success
						   })
						}, 1000);
					}
				})
				
				this.showKeyBoard = false
			},
			// 点击[取消] 关闭输入框 的回调
			close() {
				this.showKeyBoard = false
			},
			///获取商户信息
			getMerchantInfo(){
				this.$request({
					url:'?c=Merchant&a=queryMerchantInfo',
					type:'post',
					data:{
						sid:this.sid,
						type:this.type
					}
				}).then(res =>{
					this.merchantInfo = res.data;
					this.payMent = res.data.paymentMethod;
					this.payMent.map((item) => {
						item.checked = false
					})
				})
			},
			
			
			handleConfirm(){
				let that = this;
				if(!that.value){
					that.$u.toast('请输入金额')
					return;
				}
				if(!that.payObject.value){
					that.$u.toast("请选择支付方式");
					return;
				}
				if(that.payObject.value == 'wechatPay'){
					that.scanPayAction();
				}else{
					uni.showModal({
						title:  '提示',
						content: '确认使用'+that.payObject.name+'？',
						cancelText: '取消',
						confirmText: '确定',
						confirmColor: '#007aff',
						success(res) {
							if (res.confirm) {
								// that.scanPayAction();
								that.showKeyBoard = true
							}
						}
					})
				}
			},
			
			
			scanPayAction(){
				this.$request({
					url:'?c=Pay&a=scanPay',
					type:'post',
					data:{
						sid:this.sid,
						type:this.type,
						payType:this.payObject.value,
						amount:this.value
					}
				}).then(res =>{
					if(this.payObject.value == "wechatPay"){
						this.weixinpay(res.data)
					}else{
						uni.showToast({
							title:'支付成功'
						});
						setTimeout(() => {
						   let obj = {}
						   obj.showBack = this.showBack
						   obj.type = this.payObject.value
						   obj.number = this.value
						   let success = JSON.stringify(obj)
						   uni.redirectTo({
								url:'/pages/scan/scan_success?obj=' + success
						   })
						}, 1000);
					}
				})
			},
			
			
			weixinpay(data){
				let that = this;
				uni.requestPayment({
				    provider: 'wxpay',
					timeStamp: data.timeStamp,
					nonceStr: data.nonceStr,
					package: data.package,
					signType: data.signType,
					paySign: data.paySign,
					success: function (res) {
						if (res.errMsg == "requestPayment:ok"){
							uni.showToast({
								title:'支付成功'
							});
							setTimeout(() => {
							   let obj = {}
							   obj.showBack = that.showBack
							   obj.type = 'wechatPay'
							   obj.number = that.value
							   let success = JSON.stringify(obj)
							   uni.redirectTo({
								  url:'/pages/scan/scan_success?obj=' + success
							   })
							}, 1000);
						 }else{
							console.log('支付失败')
							uni.showToast({
								title:'支付失败'
							});
						 }
						
					},
					fail: function (err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},
			checked_add(val) {
				this.payMent.map((item, index) => {
					if (val == index) {
						this.payObject = item
						item.checked = true
					} else {
						item.checked = false
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.page{
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100vh;
}
.input-bg{
	// margin-top: 50rpx;
	background-color: #fff;
	border-top-right-radius: 25rpx;
	border-top-left-radius: 25rpx;
	height: 90vh;
	margin-left: 1rpx;
	margin-right: 1rpx;
	padding: 35rpx;
}
.pay-item{
	background-color: #fff;
	padding: 30rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.bottom-lay{
	position: fixed;
	left: 0;
	bottom: 0;
	height: 100rpx;
	width: 100%;
	padding-left: 50rpx;
	padding-right: 50rpx;
	text-align: center;
	background-color: #fff;
	margin-bottom: 50rpx;
	align-items: center;
}
</style>
